<template>
	 
	<view class="player" v-if="prentObj.musicData">
		<view class="playerBg" :style="{backgroundImage:'url('+prentObj.musicData.cover+')'}"></view>
		<view class="playerBgColor"></view>
		<view class="playerBox paddingContentbig"  >
			<view class="title" @click.stop="closeBigPlayer">
				<view>{{prentObj.musicData.title}}</view>
				<view>{{prentObj.musicData.singer}}</view>
			</view>
			
			<view @touchstart="touchstart" @touchend="touchmove" class="mBox"> 
				<uni-transition mode-class="slide-right" :show="!showLyc">	
					<view class="cover" @click.stop="closeBigPlayer">
						<image mode="aspectFill" :src="prentObj.musicData.cover"></image>
					</view>
					
					<view class="threeLrc" @click.stop="showBigLrc">
						<view v-if="prentObj.lyrics && prentObj.lyrics[currentLycIndex-1]">{{prentObj.lyrics[currentLycIndex-1].text}}</view>
						<view class="highlight">{{prentObj.palylrc}}</view>
						<view v-if="prentObj.lyrics && prentObj.lyrics[currentLycIndex+1]">{{prentObj.lyrics[currentLycIndex+1].text}}</view>
					</view>
				</uni-transition>	
				 
				
				<uni-transition class="lycBox"  @click="showLyc=false" mode-class="slide-left" :show="showLyc">	
				 
					<view id="lycBox" :style="{top:lycTop+'px'}">
						<view :id="currentLycIndex===index?'act':''" :class="currentLycIndex===index?'act':''" v-for="(lyc,index) in prentObj.lyrics">
							{{lyc.text}}
						</view>
					</view>
				</uni-transition>	
			</view> 
			
			<view class="action paddingContentbig">
				<view class="process">
					<!-- <view class="processLine">
						<view :style="{width:process+'%'}"></view>
					</view> -->
					
					<slider @change="seek" @changing="seeking"	 :value="process" :step="0.1" activeColor="#ffffff" backgroundColor="rgba(255, 255, 255, 0.2)" :block-size="6" />
					
					<view class="processTime">
						<view>{{get_current_time()}}</view>
						<view>{{get_total_time()}}</view>
					</view>
				</view>
				
				<view class="btBox">
					<!-- 上一首 -->
					<view @click="prentObj.prevPlay()"><cicon  name="prev" color="#ffffff"></cicon></view>
					
					<!-- 播放暂停 -->
					<view>
						<cicon v-if="!prentObj.isPlay" name="play" @click="prentObj.play()"  color="#ffffff" :size="60"></cicon>
						<cicon v-else name="pause"  @click="prentObj.pause()" color="#ffffff" :size="60"></cicon>
					</view>
					
					<!-- 下一首 -->
					<view @click="prentObj.nextPlay()"><cicon name="next" color="#ffffff"></cicon></view> 
				</view>
				
				
				<view class="actBox">
					<!-- 循环模式 -->
					<view @click="setCycleMode">
						<cicon v-if="cycleMode==='loop'" name="loop" color="#ffffff"></cicon>
						<cicon v-if="cycleMode==='loopone'" name="loopone" color="#ffffff"></cicon>
						<cicon v-if="cycleMode==='looprandom'" name="looprandom" color="#ffffff"></cicon>
						 
					</view>
					
					<!-- 收藏 -->
					<view @click="collect">
						<cicon v-if="prentObj.collect===1" name="likecheck" color="#ffffff"></cicon>
						<cicon v-else name="like" color="#ffffff"></cicon>
					</view>
					
					<!-- 播放列表 -->
					<view @click="playList">
						<cicon name="playlist" color="#ffffff"></cicon>
					</view>
					
					<!-- 歌曲信息 -->
					<view @click="musicInfo">
						<cicon name="info" color="#ffffff"></cicon>
					</view>
					
					<!-- 下载 -->
					<view style="opacity: 0.4;">
						<cicon name="download" color="#ffffff"></cicon>
					</view>
				</view>
			</view>
			
			
		</view>
	</view>
</template>

<script>
	export default {
		name:"Player",
		data() {
			return { 
				// #ifdef APP
					prentObj:this.$parent.$parent,
				// #endif
				// #ifdef H5
					prentObj:this.$parent.$parent.$parent.$parent,
				// #endif
				process:0,
				showLyc:false,
				currentLycIndex:0,
				lycTop:300,
				olycTop:300,
				currentTime:0,
				cycleMode:this.$TOOL.data.get('cycleMode') ? this.$TOOL.data.get('cycleMode') :  'loop',
				startX:0,
				startY:0
			};
		},
		
		watch:{
			currentLycIndex(val){ 
				//滚动大歌词
				
				//当前歌词的长度

				let sysInfo = uni.getSystemInfoSync()
				let screenWidth = sysInfo.screenWidth
				let devicePixelRatio = sysInfo.devicePixelRatio
				let boxWidth = screenWidth - 120/devicePixelRatio;  //px
				let fontSize = 44/devicePixelRatio
				
				
				let  moveTop = 0
				for(let i=0;i<=val;i++){
					 
					let fontWidth = fontSize*this.prentObj.lyrics[i].text.length
					let lineNumber =  Math.ceil(fontWidth/boxWidth) //行数
					moveTop+= lineNumber*36
				}
				 
				this.lycTop = this.olycTop-moveTop
				
				this.$TOOL.data.set('lycTop',this.lycTop)
				 
			},
			
			 
		},
		
		mounted() {
			// let finishTop = this.$TOOL.data.get('lycTop')
			// if(finishTop){
			// 	this.lycTop = finishTop
			// }
			
		},
		methods:{
			
			touchstart(event) {  
			    this.startX = event.changedTouches[0].pageX
			    this.startY = event.changedTouches[0].pageY
			},
			
			touchmove(event) {  
			  
				  var moveEndX = event.changedTouches[0].pageX
				  var moveEndY = event.changedTouches[0].pageY
				  var X = moveEndX - this.startX
				  var Y = moveEndY - this.startY
				  if (Math.abs(X) > Math.abs(Y) && X > 50) {
					 this.showBigLrc()
				  } else if (Math.abs(X) > Math.abs(Y) && X < 50) {
					 this.showLyc = false
				  } else if (Math.abs(Y) > Math.abs(X) && Y > 50) {
					 this.closeBigPlayer()
				  } else if (Math.abs(Y) > Math.abs(X) && Y < 50) {
					 return false
				  } 
			},
			
			showBigLrc(){
				this.showLyc = true  
			},
			
			closeBigPlayer(){ 
				this.prentObj.showBigPlayer = false
			},
			
			 
			get_total_time(){
				//歌曲总时长
				let time = 0
				if(this.prentObj.musicData.music){
					let totalTime = this.prentObj.musicData.music.additional.song_audio.duration
					time = this.$TOOL.secTotime(totalTime) 
				}
				
				return time
			},
			
			//当前播放的秒数
			get_current_time(){
				
				let time = this.$TOOL.secTotime(this.prentObj.lyricTime)
				return time
			},
			
			//进度
			get_process(){
				let process = 0
				if(this.prentObj.musicData.music){
					let totalTime = this.prentObj.musicData.music.additional.song_audio.duration
					let currentTime = this.prentObj.lyricTime
					
					process = currentTime/totalTime
				}
				this.process = process*100
				this.get_mini_lyc()
				
				
			},
			
			
			//滚动歌词
			get_mini_lyc(){
				let lyrics = this.prentObj.lyrics  //全部歌词
				let currentTime = this.prentObj.lyricTime  //当前时间
				let j;
				for(j=0; j<lyrics.length-1; j++){
					if(currentTime == lyrics[j].time){
						if(lyrics[j].text){
							this.currentLycIndex = j
							return false
						}
						
					} 
				}
			},
			
			
			musicInfo(){
				// #ifdef APP
					let parent = this.prentObj.$parent.$parent
				// #endif
				// #ifdef H5
					let parent = this.prentObj.$parent.$parent
				// #endif
				console.log(parent)
				parent.$refs.musicInfo.renderData(this.$TOOL.data.get('playMusic')).show().showMusicInfo()
			},
			
			
			playList(){
				let parent = this.prentObj
				parent.showPlaylist()
			},
			
			collect(){
				//收藏与取消收藏
				this.$TOOL.collectListManage.collect(this.$TOOL.data.get('playMusic'))
				this.prentObj.isCollect()
			},
			
			setCycleMode(){
				uni.hideToast(); 
				switch(this.cycleMode){
					case 'loop':this.cycleMode='loopone';this.$TOOL.msg('单曲循环'); break;
					case 'loopone':this.cycleMode='looprandom';this.$TOOL.msg('随机播放');break;
					case 'looprandom':this.cycleMode='loop';this.$TOOL.msg('循环播放');break;
				}
				
				this.$TOOL.data.set('cycleMode',this.cycleMode)
			},
			
			seek(e){
				let value = e.detail.value
				this.prentObj.seekTo(value)
			},
			
			seeking(e){
				let value = e.detail.value
				this.prentObj.seeking(value)
			},
			
		},
	}
</script>

<style lang="scss" scoped>
	.player{
		width: 100vw;
		height: 100vh;
		position: relative;
		overflow: hidden;
		.playerBg{
			width: 100%;
			height: 100%;
			background-size:100%;
			filter: blur(80rpx);
			transform: scale(1.5);
		}
		.playerBgColor{
			width: 100%;
			height: 100%;
			position: absolute;
			top: 0;
			left: 0;
			background: rgba(0, 0, 0, 0.3);
		}
		
		.playerBox{
			width: 100%;
			height: 100%;
			position: absolute;
			top: 0;
			left: 0;
			.title{
				color: #ffffff;
				margin-top: 5vh;
				opacity: 0.7;
				view{
					&:first-child{
						font-size: 38rpx;
						font-weight: 800;
					}
					&:last-child{
						font-size: 22rpx;
						opacity: 0.4;
					}
				}
			}
			
			.cover{
				margin-top: 5vh;
				width: calc( 100vw - 120rpx);
				height: calc( 100vw - 120rpx);
				border-radius: 20rpx;
				overflow: hidden;
				image{
					width: 100%;
					height: 100%;
				}
			}
		
			.threeLrc{
				margin-top: 5vh;
				color: #ffffff;
				font-size: 24rpx;
				>view{
					opacity: 0.5;
					padding: 4rpx 0;
					&.highlight{
						opacity: 1;
					}
				}
			}
			.mBox{
				height: calc( 90vh - 380rpx);
			}
			.lycBox{
				top: 18vh;
				
				width: calc( 100vw - 120rpx);
				height: calc( 90vh - 480rpx);
				overflow-y: hidden;
				position: absolute;
				>view{
					width: 100%;
					position: absolute;
					left: 0;
					transition: 0.3s;
					>view{
						opacity: 0.6;
						color: #ffffff;
						font-size: 36rpx;
						// height: 36px;
						line-height: 36px;
						font-weight: 600;
						transition:0.3s;
						&.act{
							font-size: 44rpx;
							// height: 36px;
							line-height: 36px;
							font-weight: 900; 
							opacity: 1;
						}
					}
				}
				
			}
			
			.action{
				position: absolute;
				left: 0;
				bottom: 3vh;
				width: 100vw;
				.process{
					width: calc(100% - 120rpx) ;
					// .processLine{
					// 	width: calc(100% - 120rpx) ;
					// 	height: 4rpx;
					// 	background: rgba(255, 255, 255, 0.2);
					// 	border-radius: 20rpx;
					// 	overflow: hidden;
					// 	position: relative;
					// 	>view{
					// 		height: 4rpx;
					// 		background: rgba(255, 255, 255, 1);
					// 		border-radius: 20rpx;
					// 		position: absolute;
					// 		top: 0;
					// 		left: 0;
					// 		transition: 0.1s; 
					// 	}
					// }
					
					uni-slider{
						margin: 0;
					}
					
					.processTime{
						width: 100% ;
						font-size: 20rpx;
						color: #ffffff;
						display: flex;
						align-items: center;
						justify-content: space-between;
						margin-top: 12rpx;
						opacity: 0.6;
					}
					
				}
				.btBox{
					display: flex;
					align-items: center;
					justify-content: center;
					width: calc(100% - 120rpx) ;
					margin-top: 30rpx;
					>view{
						margin: 0 40rpx;
						 
					}
					
				}
				
				.actBox{
					display: flex;
					align-items: center;
					justify-content: center;
					width: calc(100% - 120rpx) ; 
					margin-top: 50rpx;
					>view{ 
						margin: 0 50rpx; 
						 
					}
				}
			}
		}
	}
</style>
